<template>
  <div>
    <!-- 第一行：top3News
    <el-row justify="center" type="flex">
      <el-col :span="20">
        <top3News></top3News>
      </el-col>
    </el-row> -->
    <!-- 第二行：Carousel+top10News -->
    <el-row justify="center" :gutter="40" type="flex" style="margin-top: 20px">
      <el-col :span="16">
        <news :news="news" style="margin-top:10px;"></news>
      </el-col>
      <el-col :span="8">
        <top10News :top10News="indexPageTop10News"></top10News>
      </el-col>
    </el-row>
  </div>
</template>


<script>
import top3News from "./top3News.vue";
import top10News from "./top10News.vue";
import banyuetanjiayuan from "./banyuetanjiayuan.vue";
import contackUs from "./contackUs.vue";
import indexnewscategoryandnews from "./indexnewscategoryandnews.vue";

import news from "./news.vue";



import News from "@/api/News.js";
const objectNews=new News();

import carousel from "./carousel.vue";

export default {
  components: {
    top3News,
    carousel,
    top10News,
    banyuetanjiayuan,
    contackUs,
    indexnewscategoryandnews,
    news
  },
  data(){
    return{
      newsId:"",
      indexPageTop10News:[],
      news:{}
    }
  },
  methods:{
    async GetIndexPageTop10News(){
      const response=(await objectNews.GetTop10News())
      return response.data
      
    },
    async GetNewsById(id){
      const response=(await objectNews.GetNewsById(id))
      return response.data
      
    },

  },
  async mounted(){
    this.newsId=this.$route.params.id;
    this.indexPageTop10News=(await this.GetIndexPageTop10News())
    this.news=(await this.GetNewsById(this.newsId))
  }
};
</script>